<template>
	<view class="client-detail-container">
		<!-- 顶部客户信息 -->
		<view class="client-info-card">
			<view class="client-base-info">
				<view class="client-name">{{ clientInfo.name || '未知客户' }}</view>
				<view class="client-type">{{ clientInfo.type || '个人客户' }}</view>
			</view>
			
			<view class="contact-info">
				<view class="contact-item" @click="callPhone">
					<u-icon name="phone" color="#2979ff" size="32"></u-icon>
					<text>{{ clientInfo.phone || '暂无电话' }}</text>
				</view>
				<view class="contact-item" @click="copyWechat">
					<!-- <u-icon name="weixin-circle" color="#2979ff" size="32"></u-icon> -->
					<text>{{ clientInfo.wechat || '暂无微信' }}</text>
				</view>
			</view>
		</view>
		
		<!-- 账户汇总 -->
		<view class="account-summary">
			<view class="summary-title">账户汇总</view>
			<view class="summary-content">
				<view class="summary-item" :class="{ 'negative': accountSummary.balance < 0 }">
					<text class="item-label">账户余额</text>
					<text class="item-value">{{ formatAmount(accountSummary.balance) }}</text>
				</view>
				<view class="summary-item">
					<text class="item-label">累计消费</text>
					<text class="item-value">{{ formatAmount(accountSummary.totalConsumption) }}</text>
				</view>
				<view class="summary-item">
					<text class="item-label">最近交易</text>
					<text class="item-value">{{ accountSummary.lastTransaction || '无' }}</text>
				</view>
			</view>
		</view>
		
		<!-- 操作按钮组 -->
		<view class="action-buttons">
			<view class="action-btn" @click="handleAction('charge')">
				<u-icon name="plus-circle" color="#19be6b" size="40"></u-icon>
				<text>充值</text>
			</view>
			<view class="action-btn" @click="handleAction('consume')">
				<u-icon name="minus-circle" color="#fa3534" size="40"></u-icon>
				<text>消费</text>
			</view>
			<view class="action-btn" @click="handleAction('edit')">
				<u-icon name="edit-pen" color="#2979ff" size="40"></u-icon>
				<text>编辑</text>
			</view>
			<view class="action-btn" @click="handleAction('delete')">
				<u-icon name="trash" color="#909399" size="40"></u-icon>
				<text>删除</text>
			</view>
		</view>
		
		<!-- 交易记录列表 -->
		<view class="transaction-records">
			<view class="records-title">
				<text>交易记录</text>
			</view>
			
			<view v-if="transactions.length > 0" class="records-list">
				<view class="record-item" v-for="(item, index) in transactions" :key="index">
					<view class="record-left">
						<view class="record-title">{{ item.title }}</view>
						<view class="record-time">{{ item.time }}</view>
					</view>
					<view class="record-amount" :class="{ 'negative': item.amount < 0 }">
						{{ formatAmount(item.amount) }}
					</view>
				</view>
			</view>
			
			<view v-else class="empty-records">
				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				clientId: null,
				clientInfo: {
					name: '张三',
					type: '个人客户',
					phone: '13800138000',
					wechat: 'zhangsan123'
				},
				accountSummary: {
					balance: 1500.50,
					totalConsumption: 3280.00,
					lastTransaction: '2023-04-11'
				},
				transactions: [
					// 示例数据
					// { title: '商品购买', time: '2023-04-11 15:30', amount: -280.00 },
					// { title: '账户充值', time: '2023-04-10 10:15', amount: 500.00 }
				]
			}
		},
		onLoad(options) {
			if (options.id) {
				this.clientId = options.id;
				// 加载客户详情数据
				this.loadClientDetail();
			}
		},
		methods: {
			// 加载客户详情
			loadClientDetail() {
				uni.showLoading({
					title: '加载中...'
				});
				
				// 模拟加载数据
				setTimeout(() => {
					uni.hideLoading();
					
					// 这里应该是API调用获取真实数据
					// 这里使用示例数据
					this.transactions = [
						{ title: '商品购买', time: '2023-04-11 15:30', amount: -280.00 },
						{ title: '账户充值', time: '2023-04-10 10:15', amount: 500.00 },
						{ title: '商品退款', time: '2023-04-08 09:22', amount: 150.00 },
						{ title: '商品购买', time: '2023-04-05 14:18', amount: -650.00 }
					];
				}, 800);
			},
			
			// 格式化金额显示
			formatAmount(amount) {
				if (amount === undefined || amount === null) return '0.00';
				
				let prefix = amount >= 0 ? '+' : '';
				if (amount < 0) prefix = ''; // 负数不需要额外添加前缀
				
				return prefix + amount.toFixed(2);
			},
			
			// 拨打电话
			callPhone() {
				if (!this.clientInfo.phone) {
					uni.showToast({
						title: '暂无联系电话',
						icon: 'none'
					});
					return;
				}
				
				uni.makePhoneCall({
					phoneNumber: this.clientInfo.phone
				});
			},
			
			// 复制微信号
			copyWechat() {
				if (!this.clientInfo.wechat) {
					uni.showToast({
						title: '暂无微信号',
						icon: 'none'
					});
					return;
				}
				
				uni.setClipboardData({
					data: this.clientInfo.wechat,
					success: () => {
						uni.showToast({
							title: '微信号已复制',
							icon: 'success'
						});
					}
				});
			},
			
			// 处理按钮操作
			handleAction(action) {
				switch (action) {
					case 'charge':
						uni.showToast({ title: '功能开发中: 充值', icon: 'none' });
						break;
					case 'consume':
						uni.showToast({ title: '功能开发中: 消费', icon: 'none' });
						break;
					case 'edit':
						uni.navigateTo({
							url: `/subPack/client/add?id=${this.clientId}`
						});
						break;
					case 'delete':
						this.confirmDelete();
						break;
				}
			},
			
			// 确认删除客户
			confirmDelete() {
				uni.showModal({
					title: '确认删除',
					content: '删除后将无法恢复，确认删除该客户吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中...'
							});
							
							// 模拟删除操作
							setTimeout(() => {
								uni.hideLoading();
								uni.showToast({
									title: '删除成功',
									icon: 'success',
									duration: 2000
								});
								
								// 返回上一页
								setTimeout(() => {
									uni.navigateBack();
								}, 1500);
							}, 1000);
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.client-detail-container {
	min-height: 100vh;
	background-color: #f5f7fa;
	padding-bottom: 30rpx;
}

/* 客户信息卡片 */
.client-info-card {
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	
	.client-base-info {
		margin-bottom: 20rpx;
		
		.client-name {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}
		
		.client-type {
			font-size: 24rpx;
			color: #909399;
			background-color: #f5f7fa;
			display: inline-block;
			padding: 4rpx 16rpx;
			border-radius: 20rpx;
		}
	}
	
	.contact-info {
		display: flex;
		
		.contact-item {
			display: flex;
			align-items: center;
			margin-right: 40rpx;
			
			text {
				font-size: 28rpx;
				color: #606266;
				margin-left: 10rpx;
			}
		}
	}
}

/* 账户汇总 */
.account-summary {
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	
	.summary-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.summary-content {
		display: flex;
		justify-content: space-between;
		
		.summary-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.item-label {
				font-size: 24rpx;
				color: #909399;
				margin-bottom: 8rpx;
			}
			
			.item-value {
				font-size: 32rpx;
				color: #333;
				font-weight: 500;
			}
			
			&.negative .item-value {
				color: #fa3534;
			}
		}
	}
}

/* 操作按钮组 */
.action-buttons {
	display: flex;
	justify-content: space-around;
	background-color: #fff;
	padding: 30rpx 0;
	margin-bottom: 20rpx;
	
	.action-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		text {
			font-size: 24rpx;
			color: #606266;
			margin-top: 10rpx;
		}
	}
}

/* 交易记录 */
.transaction-records {
	background-color: #fff;
	
	.records-title {
		padding: 20rpx 30rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		border-bottom: 1px solid #eee;
	}
	
	.records-list {
		.record-item {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			border-bottom: 1px solid #eee;
			
			.record-left {
				.record-title {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 6rpx;
				}
				
				.record-time {
					font-size: 24rpx;
					color: #909399;
				}
			}
			
			.record-amount {
				font-size: 32rpx;
				color: #19be6b;
				font-weight: 500;
				
				&.negative {
					color: #fa3534;
				}
			}
		}
	}
	
	.empty-records {
		padding: 60rpx 0;
	}
}
</style> 